<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 字体图标 -->
    <!-- 引入bootstrap.css -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <!-- 核心样式 -->
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <form action="" class="bigBox">
        <div class="nav">
            <h2>图书管理</h2>
            <!-- 这里添加按钮采用属性控制显示和隐藏 -->
            <!-- data-bs-target指定控制哪一个弹出框 -->
            <button type="button" class="btn btn-primary plus-btn" data-bs-toggle="modal" data-bs-target=".add-modal">+添加</button>
        </div>
        <!-- 数据列表 -->
        <table>
            <thead class="table-light">
                <tr>
                    <th>序号</th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="list">
                <!-- <tr>
                    <td>1</td>
                    <td>js</td>
                    <td>wo</td>
                    <td>人民出版社</td>
                    <td>
                        <span class="del">删除</span>
                        <span class="edit">编辑</span>
                    </td>
                </tr> -->
            </tbody>
        </table>
    </form>
    <!-- 新增-弹出框 -->
    <div class="modal fade add-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 头部 -->
                <div class="modal-header">
                    <h5 class="modal-title title">添加图书</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <!-- 内容 -->
                <div class="modal-body form-wrap">
                    <!-- 新增表单 -->
                    <form class="collect add-form">
                        <div class="item">书名 <input type="text" placeholder="请输入书籍名称" name="bookname" autocomplete="off"></div>
                        <div class="item">作者 <input type="text" placeholder="请输入作者名称" name="author" autocomplete="off"></div>
                        <div class="item">出版社 <input type="text" placeholder="请输入出版社名称" name="publisher" autocomplete="off"></div>
                    </form>
                </div>
                <!-- 尾部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <!-- 保存按钮因为要获取数据及提交服务器，所以要采用JS控制方式 -->
                    <button type="button" class="btn btn-primary add-btn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑-弹出框 -->
    <div class="modal fade edit-modal">

    </div>
    <script src="../js/axios.min.js"></script>
    <script src="../lib/form-serialize.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="./index.js"></script>
</body>

</html>